<template>
  <div class="header">
    <div class="left">
        <span>TodoList</span>
    </div>
    <div class="right">
        <input type="text" placeholder="添加代办事项" @keyup.enter="addinfo" v-model="msg">
    </div>
  </div>
</template>

<script>

export default {
    data(){
        return{
            msg:''
        }
    },
    methods:{
        addinfo:function(){
            this.$emit("addlist",this.msg)
        }
    }
}
</script>

<style scoped lang='scss'>
    .header{
        height: 55px;
        width: 100%;
        background-color: rgb(53,53,53);
        display: flex;
        justify-content: space-around;
        align-items: center;
        .left{
            span{
                color: #fff;
            }
        }
        .right{
            width: 30%;
            height: 50%;
            background-color: #fff;
            display: flex;
            justify-content: left;
            align-items: center;
            border-radius: 10px;
            overflow: hidden;
            input{
            padding-left: 10px;
                width: 100%;
                border: 0;  // 去除未选中状态边框
                outline: none; // 去除选中状态边框
                background-color: rgba(0, 0, 0, 0);// 透明背景
            }
        }
    }
</style>